<template>
  <div>
    <a-form ref="FormRef" :model="FormState" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-form-item label="文件存储配置" name="ss_id">
        <a-select v-model:value="FormState.fs_id" placeholder="请选择文件存储配置">
          <a-select-option v-for="d in allServer" :key="d._id" :value="d._id">
            {{ d.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="文件分类" name="fc_id">
        <a-select v-model:value="FormState.fc_id" placeholder="请选择文件存储分类">
          <a-select-option v-for="d in allCate" :key="d._id" :value="d._id">
            {{ d.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="FormState.fs_id.length > 3 && FormState.fc_id.length > 3" label="选择文件">
        <a-upload-dragger
          name="file"
          :multiple="true"
          :action="apiUrl + 'api/common/uploadFileWithServer'"
          :headers="uploadHeaders"
          :data="uploadData"
          :beforeUpload="beforeUpload"
          @change="uploadChange"
        >
          <p class="ant-upload-drag-icon">
            <inbox-outlined />
          </p>
          <p class="ant-upload-text">点击选择或拖拽文件到此处</p>
          <p class="ant-upload-hint">此处最多支持10个文件同时上传，单文件最大500MB</p>
        </a-upload-dragger>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">/* eslint-disable */
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import { Row, Col, UploadDragger } from 'ant-design-vue'
import { PlusOutlined, LoadingOutlined, InboxOutlined } from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { getAllServerList, getAllCateList } from '@/api/file'
import { useRouter } from 'vue-router'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { storage } from '@/utils/Storage'
import { apiUrl } from '@/utils/common'

export default defineComponent({
  name: 'ItemEdit',
  components: {
    PlusOutlined,
    LoadingOutlined,
    InboxOutlined,
    [Row.name]: Row,
    [UploadDragger.name]: UploadDragger,
    [Col.name]: Col
  },
  setup() {
    const FormRef = ref()
    const router = useRouter()
    const state = reactive({
      uploadHeaders: {},
      uploadData: {},
      uploadLoading: false,
      apiUrl: apiUrl(),
      ConfirmLoading: false,
      allServer: [],
      allCate: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    })
    const FormState = reactive({
      fs_id: '',
      fc_id: ''
    })
    onMounted(() => {
      getServerList()
      getCateList()
    })
    const getServerList = () => {
      getAllServerList({}).then((res) => {
        state.allServer = res
      })
    }
    const getCateList = () => {
      getAllCateList({}).then((res) => {
        state.allCate = res
      })
    }
    function uploadChange(info) {
      if (info.file.status === 'uploading') {
        state.uploadLoading = true
        return
      }
      if (info.file.status === 'done') {
        state.uploadLoading = false
        requestSuccess(null,'上传成功，可通过“文件管理”进行查看')
      }
    }
    function beforeUpload(file) {
      const token = storage.get(ACCESS_TOKEN)
      if (token) {
        state.uploadHeaders['Authorization'] = 'Bearer ' + token + ':' + new Date().getTime() // 让每个请求携带token
      }
      state.uploadData = FormState
      return true
    }
    return {
      ...toRefs(state),
      FormRef,
      getServerList,
      FormState,
      beforeUpload,
      uploadChange
    }
  }
})
</script>

<style scoped></style>
